<!doctype html>
<html class="no-js">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠集市-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠集市-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

  <title>萌宠集市-C2B2C社会化电商平台->运营后台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="../statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
  <!-- 百度编辑器
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
      var ue = UE.getEditor('editor',{
              initialFrameWidth:"100%" //初始化选项
              //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
          }
      );
  </script>
   -->
  <script src="../statics/AmazeUI/assets/js/validator.js"></script>
  <script src="../statics/js/plugin/jquery.livequery.js"></script>
  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用
  <script src="statics/js/plugin/jquery.form.js"></script>
   -->
  <!--
  <script>
      $().ready( function() {
          AMUI.plugin('mySelected', AMUI.selected);
          $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
      });
  </script>
      -->
  <script src="../statics/js/plugin/jquery.metadata.js"></script>
  <script src="../statics/js/plugin/jqPaginator.min.js"></script>
  <script src="../statics/js/base.js"></script>
  <script src="../statics/js/jquery.lSelect.js"></script>
  <!-- 公共head End -->
</head>
<body>
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf app-padding-title">
        <div class="am-fl am-cf">
          <strong class="am-text-primary am-text-lg">订单管理</strong> / <small>订单列表</small>
        </div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dotted am-margin-0" />
      
      <form class="am-form" id="listForm" onsubmit="return false;" action="http://localhost:8080/order/search" method="post">
      <div class="am-g app-padding-toolbar">
        <div class="am-u-sm-6 am-u-md-4 am-padding-0">
          <div class="app-padding-toolbar-item">
            <select id="status" name="status" data-am-selected="{btnWidth: '100%', btnSize: 'sm', maxHeight: '200px'}">
              <option value="-1">全部</option>
              <option value="0">已取消</option>
		      <option value="1">未付款</option>
		      <option value="2">已付款</option>
              <option value="3">已超时</option>
              <option value="4">部分发货</option>
              <option value="5">全部发货</option>
              <option value="6">已完成</option>
              <option value="7">已关闭</option>
            </select>
          </div>
        </div>
        
        <div class="am-u-sm-12 am-show-sm-only am-margin-xs"></div>

        <div class="am-u-sm-12 am-u-md-4 am-padding-right-0">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" id="keyword" name="keyword" value="" placeholder="请输入关键字" />
            <span class="am-input-group-btn">
              <button id="searchButton" class="am-btn am-btn-default" type="button">搜索</button>
            </span>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-4 am-padding-right-0"></div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      
      <div class="am-scrollable-horizontal">
        <table id="tblOrderList" class="am-table am-table-striped am-table-hover table-main am-text-nowrap am-margin-bottom-0">
          <thead>
            <tr>
              <th>序号</th>
              <th><div class="app-table-td-buttons-width-160">操作</div></th>
              <th>买家</th>
              <th>订单编号</th>
              <th>订单金额</th>
              <th>收货人</th>
              <th>商品名称</th>
              <th>订单状态</th>
              <th>下单时间</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <!-- 分页 -->
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      <div id="divPagination" class="am-margin-left am-text-xs">
        <ul id="pagination" class="am-pagination"></ul>
      </div>

      <h3 id="noData" style="display: none;" class="am-kai am-text-center am-margin-xs">没有找到任何记录!</h3>
      </form>
    </div>
  </div>
<!-- content end -->
</body>
<script>

    // 订单列表
    let orderList = new Array();

    // 查询条件对象
    let queryObject = new Object();

    let jsonUser;
    let token;

    $().ready(function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("admin");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'admin_login.html';
            return;
        }

        // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
        if(self.location == top.location)
            location.href='admin_center.html';


        // 注册查询按钮事件
        $("#searchButton").click(function(){

            // 获取查询数据
            let status = $("#status").val();
            let keyword = $("#keyword").val();

            // 封装查询请求数据
            queryObject.status = status;
            queryObject.keyword = keyword;

            // 加载'商品列表'数据
            loadOrderList();

        });// $("#searchButton").click(function());


        // 加载'订单'列表数据
        loadOrderList();

    });// $().ready(function());

/**	加载'收货订单'列表数据 **/
function loadOrderList() {

    queryObject.token = token;
    //添加角色参数 1:普通用户 2:管理员
    queryObject.role=2;
    // 加载'收货地址列表'数据
    $.post('http://localhost:8080/order/search', queryObject, function (result) {
            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            let pageResult = result.data;

            orderList = pageResult.list;

            // 填充表格数据
            fillOrderList();

            // 初始化分页插件
            $("#pagination").remove();
            $("#divPagination").append('<ul id="pagination" class="am-pagination"></ul>');

            $.jqPaginator( '#pagination', {
                totalPages: pageResult.pages,
                totalCounts:pageResult.total,
                visiblePages: 10,
                currentPage: pageResult.pageNum,
                prev: '<li><a href="javascript:void(0);"><span class="am-icon-arrow-circle-left"></span> 上一页</a></li>',
                next: '<li><a href="javascript:void(0);">下一页 <span class="am-icon-arrow-circle-right"></span></a></li>',
                page: '<li><a href="javascript:void(0);">{{page}}</a></li>',
                activeClass: 'am-active',
                onPageChange:function( num, type ){

                    // 加载指定页码数据
                    if (type == 'change'){
                        queryObject.currentPage = num;
                        loadOrderList();
                    }

                }// onPageClick();

            });// $("#pagination").twbsPagination();

            $("#pagination").append('<li>共' + pageResult.pages + '页</li>');

        });// $.post();

}// loadOrderList();

/** 填充表格数据 **/
function fillOrderList( ) {

    // 清空表格数据
    $('#tblOrderList tbody').empty();
    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !orderList || orderList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < orderList.length; i++ ) {

        let order = orderList[i];

        let trId = '<tr id="listTr' + order.id + '">';

        // 序号
        let tdNo = '<td>' + (i+1) + '</td>';

        // 操作
        let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

        // '全部发货'按钮
        let btnFullShipping = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="fullShipping(\'' + order.id +'\')">'
                              + '<span class="am-icon-hand-o-up"> 全部发货</span></button>';

        // '查看'按钮
        let btnView = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary app-table-button-padding" onclick="location.href=\'order_view.html?id=' + order.id + '\'">'
                      + '<span class="am-icon-file-o"> 查看</span></button>';

        // 操作封装
        // 判断当前订单状态是否为'已付款'或者‘部分发货’
        if( order.status == ORDER_STATUS_CONST.PAID
            || order.status == ORDER_STATUS_CONST.PART_SHIPPED ) {
            // 显示'全部发货'按钮
            tdOpt += btnFullShipping;
        }

        tdOpt += btnView + '</div></td>';


        // 买家用户名
        let tdUsername = '<td><strong class="am-text-primary">' + order.username + '</strong></td>';

        // 订单编号
        let tdOrderNo = '<td><a href="order_view.html?id=' + order.id + '">' + order.orderNo + '</a></td>';

        // 商品名称列表
        let productNameList = '';

        // 商品名称列表(精简)
        let thinProductNameList = '';
      debugger;
        // 循环遍历，拼接商品名称列表字符串
        for( let k = 0; k < order.orderDetailList.length; k++ ) {

            let orderDetail = order.orderDetailList[k];
            productNameList += orderDetail.productName + '，';

        }

        // 去掉最后1位(,)逗号
        productNameList = productNameList.substring(0, productNameList.length - 1);

        // 截取商品名称列表字符串（防止超过长度）
        if( productNameList.length > 16 ) {
            thinProductNameList = productNameList.substring(0, 16) + '...';
        }else {
          thinProductNameList=productNameList;
        }
        //debugger;
        console.info("1");
        console.info("productName:" + productNameList);
        // 商品名称
        let tdProductName = '<td><a title="' + productNameList + '" href="order_view.html?id=' + order.id + '">'
            + '<div class="am-text-truncate shop-text-truncate-order-product-name">'
            + thinProductNameList + '</div></a></td>';

        // 收货人
        let tdShippingName = '<td>' + order.shippingName + '</td>';

        // 订单金额
        let tdPayment = '<td><strong class="am-text-danger">' + priceCurrencyFormat(order.payment) + '</strong></td>';

        // 订单状态
        let status = ORDER_STATUS[order.status];
        // 订单状态样式
        let statusIcon = ORDER_STATUS_ICON[order.status];

        let tdStatus = '<td><span class="am-badge ' + statusIcon + '">' + status + '</span></td>';

        // 下单时间
        let tdCreateTime = '<td><span title="' + order.createTime + '">' + order.createTime + '</span></td>';

        // 封装整条tr单元格
        trId += tdNo + tdOpt + tdUsername + tdOrderNo + tdPayment + tdShippingName + tdProductName + tdStatus + tdCreateTime + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblOrderList tbody').append(trId);

    }// for();

}// fillOrderList();

/** 全部发货 **/
function fullShipping( orderId ) {

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要全部发货吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/order/sendAll',
                dataType: "json",
                async: false,
                data: { token: token, orderId: orderId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('全部发货成功！');

                    // 重新加载订单列表
                    loadOrderList();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// fullShipping( orderId );
</script>
</html>
